<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>课表设置</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
    <style type="text/css">
        body{
            background-color: transparent;
        }
        .text{
            color: white;
            font-size: large;
            font-weight: bold;
        }
        .row{
            margin: 25px auto;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <form id="setting-form">
            <div class="row">
                <div class="col-sm-6 text-center">
                    <span class="text">学期总周数:</span><output id="o1" class="text" for="week-count" th:text="${user_config.getWeekCount()}"></output><span class="text">周</span>
                </div>
                <div class="col-sm-6 text-center">
                    <label>
                        <input type="range" name="week-count" id="week-count" min="1" max="30" th:value="${user_config.getWeekCount()}" onchange="o1.value = this.value">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 text-center">
                    <span class="text">课程格子高度:</span><output id="o2" class="text" for="height" th:text="${user_config.getHeight()}"></output><span class="text">px</span>
                </div>
                <div class="col-sm-6 text-center">
                    <label>
                        <input type="range" name="height" id="height" min="100" max="500" th:value="${user_config.getHeight()}" onchange="o2.value = this.value">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 text-center">
                    <span class="text">文字大小:</span><output id="o3" class="text" for="text-size" th:text="${user_config.getTextSize()}"></output><span class="text">px</span>
                </div>
                <div class="col-sm-6 text-center">
                    <label>
                        <input type="range" name="text-size" id="text-size" min="5" max="30" th:value="${user_config.getTextSize()}" onchange="o3.value = this.value">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 text-center">
                    <span class="text">文字颜色:</span><output id="o4" class="text" for="text-color" th:text="${user_config.getTextColor()}"></output><span class="text"></span>
                </div>
                <div class="col-sm-6 text-center">
                    <label>
                        <input type="color" name="text-color" id="text-color" th:value="${user_config.getTextColor()}" onchange="o4.value = this.value">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 text-center">
                    <span class="text">课程格子圆角:</span><output id="o5" class="text" for="round" th:text="${user_config.getRound()}"></output><span class="text">px</span>
                </div>
                <div class="col-sm-6 text-center">
                    <label>
                        <input type="range" name="round" id="round" min="0" max="30" th:value="${user_config.getRound()}" onchange="o5.value = this.value">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 text-center">
                    <span class="text">是否显示教师信息:</span><output id="o6" class="text" for="show-teacher" th:text="${user_config.isShowTeacher()}"></output><span class="text"></span>
                </div>
                <div class="col-sm-6 text-center">
                    <label>
                        <input type="checkbox" name="show-teacher" id="show-teacher" th:checked="${user_config.isShowTeacher()}" onchange="o6.value = this.checked">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 text-center">
                    <span class="text">课程格子不透明度:</span><output id="o7" class="text" for="alpha" th:text="${user_config.getAlpha()}"></output><span class="text"></span>
                </div>
                <div class="col-sm-6 text-center">
                    <label>
                        <input type="range" name="alpha" id="alpha" min="0" max="1" step="0.01" th:value="${user_config.getAlpha()}" onchange="o7.value = this.value">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 text-center">
                    <span class="text">“今日”指示器颜色:</span><output id="o8" class="text" for="date-color" th:text="${user_config.getDateColor()}"></output><span class="text"></span>
                </div>
                <div class="col-sm-6 text-center">
                    <label>
                        <input type="color" name="date-color" id="date-color" th:value="${user_config.getDateColor()}" onchange="o8.value = this.value">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-success" onclick="toSave()" style="width: 100%">保存</button>
                </div>
            </div>
        </form>
    </div>
</body>
<script type="text/javascript">
    /*保存用户配置*/
    function toSave() {
        $(function () {
            $.ajax({
                type: 'POST',
                url: '/schedule_setting',
                data: $('#setting-form').serialize(),
                success: function (result) {
                    switch (result.resultCode) {
                        case 200:{
                            Swal.fire({
                               title: '成功',
                               text: '保存成功',
                               icon: 'success',
                               confirmButtonText: '确定'
                            });
                            break;
                        }
                        case 404:{
                            Swal.fire('提示', '您还没有登录Sunshine课程表', 'error');
                            break;
                        }
                        case 500:{
                            Swal.fire('提示', '服务器出现了问题，问题如下：' + result.message, 'error')
                        }
                    }
                },
                error: function () {
                    Swal.fire('提示', "保存失败，未知问题", 'error');
                }
            })
        })
    }
</script>
</html>